<template>
    <div>
        <div class="mainBox">
            <!-- 下拉框查询 -->
            <el-form :inline="true" :model="ruleForm" label-width="110px" class="formBox">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item class="secondRow_formItem" label="日期">
                            <el-date-picker v-model="value1" type="daterange" range-separator="至" :start-placeholder="ruleForm.startTime" unlink-panels value-format="yyyy-MM-dd" :end-placeholder="ruleForm.endTime" @change="echartsTime">

                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item class="secondRow_formItem">
                            <el-button type="primary" @click="query">订单查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="tableBox">
            <div class="jfdk">
                <span>会员订单明细</span>
            </div>
            <div class="export">
                <el-button type="info" icon="el-icon-download" size="small" @click="exportExcel">导出</el-button>
            </div>
            <el-table     show-summary :summary-method="getSummaries" :data="tableData" style="width:100%" stripe border id="out-table2" v-loading="tableLoading">
                <el-table-column type="index" label="序号" width="80" :index="dealIndex" center></el-table-column>
                <el-table-column prop="memberValue" label="会员姓名" center></el-table-column>
                  <el-table-column prop="consumptionNumber" label="消费单号" center></el-table-column>
                <el-table-column prop="enterIntegral" label="入账积分" center></el-table-column>
                <el-table-column prop="consumptionMoney" label="入账金额" center></el-table-column>
                <el-table-column prop="storeValue" label="消费门店" center></el-table-column>
                <el-table-column prop="createTime" label="消费时间" center></el-table-column>
            </el-table>
            <el-pagination style="padding:20px 0;text-align:center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[2, 5, 10, 20, 50]" :page-size="size" layout="total,sizes,prev,pager,next,jumper" :total="total">
            </el-pagination>
        </div>

        <div class="tableBox">
            <div class="jfdk">
                <span>店面销售汇总</span>
            </div>
            <el-table :data="tableData1" style="width:100%" stripe border id="out-table2" v-loading="tableLoading1">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="name" label="门店名称" center></el-table-column>
                <el-table-column prop="sumEnterIntegral" label="总计入账积分" center></el-table-column>
                <el-table-column prop="sumConsumptionMoney" label="总计消费金额" center></el-table-column>
              
            </el-table>

        </div>
    </div>
</template>

<script>
import { integralEnterLogInList, order } from "@/api/user";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      ruleForm: {
        startTime: "",
        endTime: ""
      },
      size: 10,
      tableLoading1:true,
      value1: "",
      total: 0,
      current: 1,
      tableData: [],
      tableData1:[],
      tableLoading: true
    };
  },
  mounted() {
    this.getNowFormatDate();
    this.order();
    this.storeOrder();
  },
  methods: {
      //总计求和
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
        } else if (index === 3 || index === 4) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = 'N/A'
          }
        } else {
          sums[index] = '--'
        }
      })
      return sums
    },

    storeOrder() {
      let data = {
        startTime: this.ruleForm.startTime,
        endTime: this.ruleForm.endTime
      };
      order(data).then(res => { 
        if (res.code == 200) {
          this.tableData1 = res.data;
          this.tableLoading1=false
        
        } else {
          this.$message.error(res.msg);
            this.tableLoading1=false
        }
      });
    },
    order() {
      let data = {
        current: this.current,
        size: this.size,
        startTime: this.ruleForm.startTime + " " + "00:00:00",
        endTime: this.ruleForm.endTime + " " + "23:59:59"
      };
      integralEnterLogInList(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.tableLoading=false
        } else {
          this.$message.error(res.msg);
           this.tableLoading=false
        }
      });
    },
    echartsTime(val) {
      this.ruleForm.startTime = val[0];
      this.ruleForm.endTime = val[1];
    },
    query() {
        this.storeOrder();
         this.order();
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var month1 = date.getMonth();
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (month1 >= 1 && month1 <= 9) {
        month1 = "0" + month1;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      this.ruleForm.startTime =
        year + seperator1 + month1 + seperator1 + strDate;
      this.ruleForm.endTime = year + seperator1 + month + seperator1 + strDate;
    },
    handleSizeChange(val) {
      this.size = val;
      this.order();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.order();
    },

    // 抵扣积分记录导出
    exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table2"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

    dealIndex(index) {
      var self = this;
      return index + 1 + (self.current - 1) * self.size;
    }
  }
};
</script>

<style>
.formBox {
  margin-top: 20px;
}
.tableBox {
  margin: 20px 20px 0 20px;
}
tableBox1 {
  margin: 80px 20px 0 20px;
}
.export {
  text-align: right;
  margin-bottom: 30px;
}
.jfdk {
  text-align: center;
  font-size: 29px;
  color: #999999;
  line-height: 25px;
  margin: 40px 0 20px 0;

  letter-spacing: 1px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
